<!-- 
	<template>//组件的结构</template>
	<script>//组件交互相关的代码(数据、方法等等)</script>
	<style>//组件的样式</style>
-->
<!-- 
将组件对外暴露 ，方便别人引用；总共有3中暴漏方式；
1. 分别暴露：	export const school = Vue.extend
2. export {school}  //这是统一暴露；
3.export default school //默认暴露，
   默认暴露引入：import ??? from ??
	 分别暴露和统一暴露引入方法：import {???} from ??
 -->
<template>
	<div class="demo">
		<h1>学校：{{schollName}}</h1>
		<h1>地址:{{address}}</h1>
		<button @click="showName">点我显示学校名</button>
	</div>
</template>


<script>
	/* 
		//分别暴露：
		export const school = Vue.extend({
			data(){
				return {
					schollName:"尚硅谷",
					address:"和平谷",
				}
			},
			methods:{
				showName(){
					alert(this.schollName)
				}
			}
		})
		 //export {school}  //这是统一暴露；
		export default school //默认暴露
  */
 
	//这样写比较麻烦，可以简单的写：
/* 	export default Vue.extend({
			data(){
				return {
					schollName:"尚硅谷",
					address:"和平谷",
				}
			},
			methods:{
				showName(){
					alert(this.schollName)
				}
			}
		}) */
		
	//进一步省略:
	export default {
		name:'School',
		data(){
			return {
				schollName:"尚硅谷",
				address:"和平谷",
			}
		},
		methods:{
			showName(){
				alert(this.schollName)
			}
		}
	}
		
</script>

<style>
	.demo{
		background-color: orange;
	}
	
</style>

